import QtQuick 2.3
import QtQuick.Controls 1.2
import QtQuick.Controls.Styles 1.4

TextField {
    id: root

    property bool   showUnits: false
    property string unitsLabel: ""
    property color  textFieldColor: "#ffffff"
    property color  textColor: "#000000"
    property color  borderColor: activeFocus ? "#47b" : "#999"

    implicitHeight: 30

    style: TextFieldStyle {
        font.pointSize: 18
        background: Item {
            Rectangle {
                anchors.fill: parent
                anchors.bottomMargin: -1
                color: "#44ffffff"
            }

            Rectangle {
                anchors.fill: parent
                border.color: control.borderColor
                color: control.textFieldColor
            }

            Text {
                anchors.verticalCenter: parent.verticalCenter
                anchors.right: parent.right
                anchors.rightMargin: 5
                text: control.unitsLabel
                font.pointSize: 10
                color: control.textColor
                visible: control.showUnits
            }
        }
    }

    onActiveFocusChanged: {
        if (activeFocus) {
            selectAll()
        }
    }

    onEditingFinished: {
        focus = false
    }
}
